<template>
    <el-container>
        <el-header>
            <div class="right-panel-search">
                <!-- <div class="search-input">计划完工</div> -->
                <div class="search-input">订单号</div>
                <el-input v-model="search.order_no" placeholder="请输入订单号" clearable @change="handleKeyDown" />
                <div class="search-input">工厂货号/SKC</div>
                <el-input v-model="search.keyword" placeholder="请输入工厂货号/SKC" clearable @change="handleKeyDown" />
                <div class="search-input">客户</div>
                <el-select v-model="search.client_id" clearable filterable placeholder="请选择" multiple>
                    <el-option v-for="item in curList" :key="item.custom_id" :label="item.apply_name" :value="item.custom_id" />
                </el-select>
                <div class="search-input">下单时间</div>
                <el-date-picker v-model="search.time_range" :value-format="'YYYY-MM-DD'" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" :size="size" style="width:220px" />
                <el-button type="primary" icon="el-icon-search" @click="upsearch">搜索</el-button>
                <el-button type="primary" icon="el-icon-plus" @click="add">新增生产单</el-button>
                <el-button type="danger" icon="el-icon-delete" :disabled="selection.length==0" @click="batch_del" v-auth="'produce.forcedelete'">删除</el-button>
            </div>
        </el-header>
        <el-main class="nopadding">
            <scTable ref="table" :apiObj="apiObj" row-key="id" @selection-change="selectionChange" stripe remoteSort remoteFilter border :params="query" show-summary>
                <el-table-column type="selection" width="50" align="center"></el-table-column>
                <el-table-column fixed label="订单号" align="center" width="160">
                    <template #default="{row}">
                        <div>{{row.order_no}}</div>
                        <div>{{row.create_time}}</div>
                    </template>
                </el-table-column>
                <el-table-column label="商品信息" fixed prop="goods" align="center" width="300">
                    <template #default="{row}">
                        <div class="shopInfo" v-if="row.goods">
                            <el-image class="img" :src="row.goods.goods_image" :preview-src-list="row.goods.goods_image_item" :initial-index="0" fit="cover" preview-teleported="true" hide-on-click-modal />
                            <div class="right">
                                <div>工厂货号：{{row.factory_number}}</div>
                                <div>批次号：{{row.batch_number}}</div>
                                <div>SKC：{{row.skc}}</div>
                                <div>商品品牌：{{row.brand_name}}</div>
                                <div>客户：{{row.custom_name}}</div>
                                <div>颜色：{{row.goods.colour}}</div>
                                <div v-if="row.sizeCate">商品类别：{{row.sizeCate.title}}</div>
                            </div>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column fixed label="尺码" align="center">
                    <template #default="{row}">
                        <div v-for="(item,index) in row.orderDetail" :key="index">
                            {{item.goods_size}}
                        </div>
                    </template>
                </el-table-column>
                <el-table-column fixed label="下单数量" prop="total_count" align="center">
                    <template #default="{row}">
                        <div v-for="(item,index) in row.orderDetail" :key="index">
                            {{item.num}}
                        </div>
                    </template>
                </el-table-column>
                <el-table-column fixed label="生产数量" prop="total_count" align="center">
                    <template #default="{row}">
                        <div v-for="(item,index) in row.orderDetail" :key="index">
                            {{item.produce_num}}
                        </div>
                    </template>
                </el-table-column>
                <el-table-column fixed label="总数" prop="total_count" align="center"> </el-table-column>
                <el-table-column label="订单标签" align="center" width="100">
                    <template #default="scope">
                        <el-tag v-if="scope.row.order_label==1" type="danger">加急</el-tag>
                        <el-tag v-else type="success">正常</el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="针种" align="center">
                    <template #default="scope">
                        <div>{{scope.row.needle_seed_name}}</div>
                    </template>
                </el-table-column>
                <el-table-column label="毛种" align="center">
                    <template #default="scope">
                        <div>{{scope.row.wool_seed}}</div>
                    </template>
                </el-table-column>
                <el-table-column label="洗水方式" align="center">
                    <template #default="scope">
                        <div>{{scope.row.washing_method_title}}</div>
                    </template>
                </el-table-column>
                <el-table-column label="生产交期" align="center">
                    <template #default="scope">
                        <div>{{scope.row.deliver_time}}</div>
                    </template>
                </el-table-column>
                <el-table-column label="下单人" align="center" column-key="filterCreate" :filters="createFilters">
                <!-- <el-table-column label="下单人" align="center"> -->
                    <template #default="scope">
                        <div>{{scope.row.creator_name}}</div>
                    </template>
                </el-table-column>
                <el-table-column label="制单人" align="center" column-key="filterMain" :filters="zhiFilters">
                <!-- <el-table-column label="制单人" align="center"> -->
                    <template #default="{row}">
						<div>{{row.maintenance_name}}</div>
					</template>
                </el-table-column>
                <el-table-column label="操作" fixed="right" align="center" width="140">
                    <template #default="scope">
                        <el-button-group style="display:flex;flex-direction:column">
                            <!-- <el-button text type="primary" size="small" @click="goDetail(scope.row, scope.$index)" v-auth="'produce.perfect'">生产单详情</el-button> -->
                            <div v-if="edit">
                                <sc-status-indicator type="danger" v-if="scope.row.planned_speed == 0"></sc-status-indicator>
                                <el-button text type="primary" size="small" @click="goPer(scope.row, scope.$index)" v-auth="'produce.perfect'">完善生产单</el-button>
                            </div>
                            <el-button text type="primary" size="small" @click="jitPrint(scope.row, scope.$index)" v-auth="'produce.print'">工艺单</el-button>
                            <el-button text type="primary" size="small" @click="table_show(scope.row, scope.$index)" v-auth="'produce.show'">查看生产单</el-button>
                            <el-button text type="primary" size="small" @click="table_edit(scope.row, scope.$index)" v-auth="'produce.edit'">修改</el-button>
                            <el-popconfirm title="确定删除吗？" @confirm="table_del(scope.row, scope.$index)">
                                <template #reference>
                                    <el-button text type="danger" size="small" v-auth="'produce.delete'">删除</el-button>
                                </template>
                            </el-popconfirm>
                        </el-button-group>
                    </template>
                </el-table-column>
            </scTable>
        </el-main>
    </el-container>
    <add-pro v-if="dialog.save" ref="addDialog" @success="handleSuccess" @closed="dialog.save = false" draggable></add-pro> 
    <process v-if="dialog.proSave" ref="proDialog" @success="handleSuccess" @closed="dialog.proSave = false" draggable></process> 
    <perfect v-if="dialog.perSave" ref="perDialog" @success="handleSuccess" @closed="dialog.perSave = false" draggable></perfect>
    <detail v-if="dialog.detSave" ref="detDialog" @success="handleSuccess" @closed="dialog.detSave = false" draggable></detail>
    <print-gong v-if="dialog.print" ref="printDialog" @success="handleSuccess" @closed="dialog.print = false" draggable></print-gong>
</template>
<script>
import Detail from './detail.vue';
import addPro from './addPro';
import Process from './process';
import Perfect from './perfect';
import PrintGong from '@/views/order/factoryOrder/printGong.vue';

export default {
  components: { addPro,Process,Perfect,Detail, PrintGong },
// components: { Perfect,Detail },
	name: 'user',
	data() {
		return {
            dialog:{
                save:false,
                proSave:false,
                perSave:false,
                detail:false,
                print:false,
            },
			groupFilterText: '',
			group: [],
			apiObj: this.$API.produce.getProduce.lists,
            query:{
                planned_speed:0
            },
			selection: [],
			search: {
				time_range: null,
				keyword: null,
                order_no:null,
                client_id:null
			},
			//所需数据选项
            settlementList: [],
            curList: [],
            createFilters: [],
			zhiFilters: [],
            edit:this.$TOOL.data.get("PERMISSIONS").includes('produce.perfect')
		}
	},
	watch: {
		groupFilterText(val) {
			this.$refs.group.filter(val);
		}
	},
	mounted() {
        this.getCustomerList()
        this.getCreate()
    },
	methods: {
        // 下单人/制单人
        async getCreate() {
            var res = await this.$API.all.getProduceFilter.get();
			let a = []
			let b = []
			res.data.order_creator.map(item => {
				a.push({
					text: item.name,
					value: item.id,
				})
			})
            res.data.maintenance_creator.map(item => {
				b.push({
					text: item.name,
					value: item.id,
				})
			})
			this.createFilters = a
			this.zhiFilters = b
		},
        // 完善生产单
        goPer(row) {
			this.dialog.perSave = true
			this.$nextTick(() => {
				this.$refs.perDialog.open('add').setData(row)
			})
		},
        // 详情
        goDetail(row) {
			this.dialog.detSave = true
			this.$nextTick(() => {
				this.$refs.detDialog.open('add').setData(row)
			})
		},
        table_show(row) {
			this.dialog.perSave = true
			this.$nextTick(() => {
				this.$refs.perDialog.open('show').setData(row)
			})
		},
        // 新增生产单
        add() {
			this.dialog.save = true
			this.$nextTick(() => {
				this.$refs.addDialog.open('add')
			})
		},
		//编辑
		table_edit(row) {
			this.dialog.perSave = true
			this.$nextTick(() => {
				this.$refs.perDialog.open('edit').setData(row)
			})
		},
        async jitPrint(row){
            var reqData = { order_no_arr: row.order_no };
            var res = await this.$API.print.orderPrintAll.get(reqData);
			if (res.code == 1) {
                this.dialog.print = true;
                setTimeout(()=>{
                    this.$refs.printDialog.open("edit").setData(res.data.template_data);
                },500)
			} else {
				this.$alert(res.message, "提示", { type: "error" });
			}
        },
		//删除
		async table_del(row, index) {
			var reqData = { id: row.id }
			var res = await this.$API.produce.getProduce.delete.post(reqData);
			if (res.code == 1) {
				//这里选择刷新整个表格 OR 插入/编辑现有表格数据
				this.$refs.table.tableData.splice(index, 1);
                this.$refs.table.refresh()
				this.$message.success("删除成功")
			} else {
				this.$alert(res.message, "提示", { type: 'error' })
			}
		},
		//搜索
		upsearch() {
			this.$refs.table.upData(this.search)
		},
        selectionChange(selection){
            this.selection = selection;
        },
		//本地更新数据
		handleSuccess(data, mode) {
			if (mode == 'add') {
				this.$refs.table.refresh()
			} else if (mode == 'edit') {
				this.$refs.table.refresh()
			} else if (mode == 'set') {
				this.$refs.table.refresh()
			}
		},
        handleKeyDown() {
            this.upsearch()
        },
        // 获取客户
        async getCustomerList(){
            var res = await this.$API.all.customer.get();
            this.curList = res.data;
            let a = {
                apply_name : '空',
                custom_id : 0
            }
            this.curList.unshift(a)
        },
        //批量删除
        async batch_del(){
            var delete_ids = [];
            this.selection.forEach((item) => {
                delete_ids.push(item.produce_no)
            })
            this.$confirm(`确定删除选中的 ${this.selection.length} 项吗？`, '提示', {
                type: 'warning'
            }).then(() => {
                this.table_del_all(delete_ids)
            }).catch(() => {

            })
        },
        async table_del_all(delete_ids){
            var reqData = {produce_no_arr: delete_ids}
            var res = await this.$API.produce.getProduce.forcedelete.post(reqData);
            if(res.code == 1){
                this.$refs.table.refresh()
                this.$message.success("操作成功")
            }else{
                this.$alert(res.message, "提示", {type: 'error'})
            }
        },
	}
}
</script>

<style>
.search-input {
	width: auto;
	font-size: 14px;
}
</style>